<template>
  <div class="icon-body">
    <el-row>

      <el-autocomplete
        v-model="nameOrPhone"
        :fetch-suggestions="queryTalent"
        placeholder="请输入姓名或者电话"
        maxlength="11"
        @select="selectTalent"
      />

    </el-row>
    <el-row>
      <el-divider content-position="left">已选人才</el-divider>
    </el-row>
    <el-row justify="start">
      <el-tag
        v-for="talent in selectedTalent"
        :key="talent.name"
        closable
        effect="plain"
        size="medium"
        class="tag-margin"
        @close="selectedTalent.splice(index, 1)"
      >
        {{ talent.name + '【' + talent.phone + '】' }}
      </el-tag>
    </el-row>
  </div>
</template>

<script>
import { listHtTalentF } from '@/api/hunter/ht-talent'
export default {
  name: 'TalentSelect',
  props: {
    projectId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      nameOrPhone: '',
      selectedTalent: []
    }
  },
  created() {

  },
  methods: {
    queryTalent(queryString, cb) {
      if (queryString) {
        listHtTalentF({
          projectId: this.projectId,
          nameOrPhone: queryString
        }).then(res => {
          var talentList = res.data
          if (talentList.list.length > 0) {
            var temp = []
            talentList.list.forEach(item => {
              temp.push({ value: item.name + '【' + item.phone + '】', talent: item })
            })
            cb(temp)
          }
        })
      }
    },
    selectTalent(item) {
      this.nameOrPhone = ''
      this.selectedTalent.push(item.talent)
    },
    reset() {
      this.nameOrPhone = ''
      this.selectedTalent = []
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .el-card.is-always-shadow, .el-card.is-hover-shadow:focus, .el-card.is-hover-shadow:hover{
    box-shadow: none;
  }
  .tag-margin {
    margin-right: 20px;
    margin-bottom: 20px;
  }
  /* 媒体查询：适配手机 */
  @media (max-width: 600px) {
    .tag-margin {
      margin-right: 10px;
      margin-bottom: 10px;
    }
  }
</style>
